<div class="container-fluid cm-container-white">
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>头像</th>
        <th>名称</th>
        <th>性别</th>
        <th>简介</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <div class="page">
    <ul class="pagination"></ul>
  </div>
</div>

<script type="text/template" id="tableTemp">
      {{each item value i}}
      <!-- <li>索引 {{i + 1}} ：{{value.name}}</li> -->
      <tr>
        <th scope="row">
          {{i + 1}}
        </th>
        <td><img src="/img/{{value.avatar}}" alt="" style="width:80px;height:80px;"> </td>
        <td>
          {{value.name}}
        </td>
        {{if value.gender=='m'}}
        <td>男</td>
        {{else if(value.gender=='f')}}
        <td>女</td>
        {{else}}
        <td>保密</td>
        {{/if}}
        <td>
         {{value.bio}}
        </td>
      </tr>
  {{/each}}
  </script>
<script>
  let currentPage = 1;
  let pageSize = 2;
  function render() {
    $.ajax({
      url: "/user/list",
      type: 'post',
      data: {
        page: currentPage,
        pageSize: pageSize
      },
      dataType: "json",
      success: function (result) {
        console.log(result)
        // 将数据渲染到页面
        $("tbody").html(template("tableTemp", { item: result.data }))
        // 调用分页函数.参数:当前所在页, 总页数(用总条数 除以 每页显示多少条,在向上取整), ajax函数
        setPage(currentPage, Math.ceil(result.count / pageSize), render)
      }
    })
  }
  $(function () {
    render()
  });

  /**
   *
   * @param pageCurrent 当前所在页
   * @param pageSum 总页数
   * @param callback 调用ajax
   */
  function setPage(pageCurrent, pageSum, callback) {
    $(".pagination").bootstrapPaginator({
      //设置版本号
      bootstrapMajorVersion: 3,
      // 显示第几页
      currentPage: pageCurrent,
      // 总页数
      totalPages: pageSum,
      //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
      onPageClicked: function (event, originalEvent, type, page) {
        // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
        console.log(page)
        currentPage = page
        callback && callback()
      }
    })
  }
</script>